<template>
  <div style="width: 100%;height: 100%;">
    <div class="h_div" style="width: 100%; height: 100%">

      <el-carousel indicator-position="outside" height="450px" class="carousel_B">
        <el-carousel-item v-for="item in itemList" :key="item.index" class="item_card">
          <el-image :src="item.src">
          </el-image>
        </el-carousel-item>
      </el-carousel>
      <br>
      <div class="div2">
        <span class="recycledPaper_text">当前已经为广大用户完成了
          <span class="recycledPaper">{{ this.recycledPaper }}</span>
          份回收</span>
        <el-divider content-position="right">{{ this.$store.state.VueName }}</el-divider>
        <div class="hot_model">
          <span class="hot_model_title">热门模板</span>
          <a class="all_model" href="/survey/template">查看全部模板>></a>
          <br>
          <div class="div3">
            <el-row :gutter="70">
              <el-col :span="4">
                <a class="thumbnail_wrapper_link" href="/survey/template?id=6">
                  <div class="thumbnail_wrapper">
                    <img :src="require('../assets/imgs/loader/chat.png')" class="thumbnail">
                  </div>
                  <div class="thumbnail_wrapper_text">
                    社交网络满意度
                  </div>
                </a>
              </el-col>
              <el-col :span="4">
                <a class="thumbnail_wrapper_link" href="/survey/template?id=2">
                  <div class="thumbnail_wrapper">
                    <img :src="require('../assets/imgs/loader/coffee.png')" class="thumbnail">
                  </div>
                  <div class="thumbnail_wrapper_text">
                    团购网站用户满意度
                  </div>
                </a>
              </el-col>
              <el-col :span="4">
                <a class="thumbnail_wrapper_link" href="/survey/template">
                  <div class="thumbnail_wrapper">
                    <img :src="require('../assets/imgs/loader/game.png')" class="thumbnail">
                  </div>
                  <div class="thumbnail_wrapper_text">
                    PC端游、页游满意度
                  </div>
                </a>
              </el-col>
              <el-col :span="4">
                <a class="thumbnail_wrapper_link" href="/survey/template">
                  <div class="thumbnail_wrapper">
                    <img :src="require('../assets/imgs/loader/medical.png')" class="thumbnail">
                  </div>
                  <div class="thumbnail_wrapper_text">
                    身体健康状况调查
                  </div>
                </a>
              </el-col>
              <el-col :span="4">
                <a class="thumbnail_wrapper_link" href="/survey/template">
                  <div class="thumbnail_wrapper">
                    <img :src="require('../assets/imgs/loader/talent.png')" class="thumbnail">
                  </div>
                  <div class="thumbnail_wrapper_text" >
                    国际标准智商测试
                  </div>
                </a>
              </el-col>
              <el-col :span="4">
                <a class="thumbnail_wrapper_link" href="/survey/template">
                  <div class="thumbnail_wrapper">
                    <img :src="require('../assets/imgs/loader/tv.png')" class="thumbnail">
                  </div>
                  <div class="thumbnail_wrapper_text">
                    数码家电类产品满意度
                  </div>
                </a>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="key_words_div">
        <div class="description">
          <div class="key_words">
            <span class="key_words_simple">简约</span>
            <span class="key_words_easy">好用</span>
            <span class="key_words_profession">专业</span>
          </div>
          <div class="description_text">
            QDQ问卷为您提供专业调研服务
          </div>
        </div>
      </div>
      <div class="f_div">
        <div class="f_div_text">
          Copyright © 2021 QDQ. All Rights Reserved.
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "loader",
  data() {
    return {
      recycledPaper: 0,
      itemList: [
        {
          title: '',
          src: require("../assets/imgs/index_slider_p0.png")
        },
        {
          title: '',
          src: require("../assets/imgs/index_slider_p1.png")
          
        }, {
          title: '',
          src: require("../assets/imgs/index_slider_p2.png")
        }
      ]
    }
  },
  methods:{
    clickToTemplate(){
      this.$router.push("/survey/template")
    }
  },
  created() {
    this.$http.get("question/count").then(resp=>{
      this.recycledPaper=resp.data
    })
  }
}
</script>

<style lang="less" scoped>
.carousel_B {
  background-image: url("../assets/imgs/index_background.jpg");
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.btn {
  position: absolute;
  left: 44.1%;
  width: 200px;
  top: 340px;
  z-index: 9999;
  background: white;
  opacity: 0.3;
}

.item_card {
  text-align: center;

  .el-image {
    margin-top: 150px;
  }
}

.div2 {
  position: relative;
  margin: 0 auto;
  width: 80%;

}
.recycledPaper_text{
  font-size: 14px;
  color: #999;
}
.recycledPaper{
  color: #58a6e7;
  font-size: 30px;
  margin-right: 5px;
}
.hot_model_title{
  font-size: 20px;
  font-weight: 400;
  margin: 38px 0 14px;
}
.all_model{
  text-decoration: none;
  color: #58a6e7;
  font-size: 14px;
  margin-left: 1000px;
}
.div3{
  position: absolute;
  top: 150px;
}
.thumbnail_wrapper_link{
  text-decoration: none;
  color: #333;
}
.thumbnail_wrapper_link:hover .thumbnail_wrapper_text{
  color: #58a6e7;
}
.thumbnail_wrapper{
  width: 138px;
  height: 138px;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 5px;
  line-height: 138px;
  text-align: center;
}
.thumbnail{
  vertical-align: middle;
}
.thumbnail_wrapper_text{
  margin-top: 13px;
  text-align: center;
  font-size: 14px;
}
.key_words_div{
  width: 100%;
  height: 120px;
  background-color: #f5f5f5;
  padding: 38px 0 20px;
  position: absolute;
  bottom: -400px;

}
.description{
  text-align: center;
}
.key_words{
  font-size: 20px;
  color: #58a6e7;
}
.key_words_simple{
  line-height: 24px;
  display: inline-block;
  padding: 15px 0 15px 60px;
  margin-right: 20px;
  background-size: 54px;
  background-image: url("../assets/imgs/loader/icon_simple.png") ;
  background-repeat: no-repeat;
}
.key_words_easy{
  line-height: 24px;
  display: inline-block;
  padding: 15px 0 15px 60px;
  margin-right: 20px;
  background-size: 54px;
  background-image: url("../assets/imgs/loader/icon_easy.png");
  background-repeat: no-repeat;
}
.key_words_profession{
  line-height: 24px;
  display: inline-block;
  padding: 15px 0 15px 60px;
  margin-right: 20px;
  background-size: 54px;
  background-image: url("../assets/imgs/loader/icon_profession.png");
  background-repeat: no-repeat;
}
.description_text{
  margin-top: 22px;
  color: #999;
  font-size: 22px;
}
.f_div{
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: -450px;
}
.f_div_text{
  text-align: center;
  margin-top: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #c5c5c5;
}
</style>